<template>
    <header>
        <div class="l-content">
            <el-button plain icon="el-icon-menu" size="mini"></el-button>
            <Breadcumb/>
        </div>
        <div class="r-content">
            <!--下拉菜单-->
            <el-dropdown trigger="click" >
                <span class="el-dropdown-link">
                    UserName<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>修改密码</el-dropdown-item>
                    <el-dropdown-item divided>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </header>
</template>

<script>
    import Breadcumb from './Breadcumb';

    export default {
        name:'Header',
        components:{Breadcumb}
    }
</script>

<style lang="less" scoped>
    header{
        display: flex;
        height: 100%;
        justify-content: space-between;
        align-items: center;
    }
    .l-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-button{
            margin-right: 20px;
        }
        
    }
    .el-dropdown-link{
        cursor: pointer;
    }
</style>